filestack-js

Javascript SDK for the Filestack API and content management system.

---

What's in the box?

• A multi-part uploader powered on the backend by the Filestack CIN.
• An interface to the Filestack Processing Engine for transforming assets via URLs.
• The Filestack Picker - an upload widget for the web that integrates over a dozen cloud providers and provides pre-upload image editing.

Installation

npm install filestack-js

Usage

Browsers

ES module:

import * as filestack from 'filestack-js';
const client = filestack.init('apikey');

UMD module:

<script src="//static.filestackapi.com/filestack-js/{MAJOR_VERSION}.x.x/filestack.min.js"></script>
<script>
  const client = filestack.init('apikey');
</script>

where VERSION is one of the MAJOR versions of the filestack-js ie:

<script src="//static.filestackapi.com/filestack-js/2.x.x/filestack.min.js"></script>
<script>
  const client = filestack.init('apikey');
</script>

GZIP support

To speed up library loading you can use gzipped file available after adding gz before the file extension

<script src="//static.filestackapi.com/filestack-js/{MAJOR_VERSION}.x.x/filestack.min.gz.js"></script>
<script>
  const client = filestack.init('apikey');
</script>

Node

CommonJS module:

const client = require('filestack-js').init('apikey');

Module Overview

The package.json specifies two separate modules:

• main for the CommonJS module (intended for Node runtimes)
• browser for the pre-bundled ES module (intended for browser runtimes)

Node projects which depend on filestack-js will follow the main field in package.json. When building for the browser, newer tools (like Webpack, Rollup, and Parcel) follow the browser field, which will resolve to the pre-bundled ES module. Both modules follow the same API, but some methods behave differently based on their runtime. For example, client.upload treats the file argument as a file path in Node but in browsers it assumes a Blob object.

The pre-bundled browser module is also available in UMD format. This is useful if you are using script tags on a web page instead of bundling your application. It can be retrieved from both the Filestack CDN and the unpkg CDN:

• Filestack CDN
• unpkg

Live examples (JSFiddle)

Upload image
Open picker
Open picker in inline mode
Crop images
Multiple drop panes
Preview
Import using RequireJS
Retrieve image data
Transform image
Custom Picker CSS
Assign file to user

Examples can be run locally with:

npm run examples

Picker Quick Start

If you are here to use the picker widget, it can be initialized from the Filestack client by calling client.picker(options). Options for the picker are documented here.

The picker instance returned from client.picker can be controlled with a few methods:

• open - Create the application and mount it into the DOM based on the displayMode.
• close - Close the application and remove its resources from the DOM.
• crop(files) - Create the application, mount it, and pre-select the passed files for cropping.
• cancel - Cancel all uploads controlled by this instance.

Please see our examples above to learn more about customizing the picker for your use case.

API Documentation

https://filestack.github.io/filestack-js/

Promises

This library requires an environment that implements the Promise object spec. If you target IE11 or iOS before 8.0 you will need to add a Promise polyfill to your page or application.

Polyfills we recommend:

Module (for bundling):

• https://github.com/taylorhakes/promise-polyfill

Script (for script tag):

• https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise

Development

Most tests in this library are expected to interface with actual backend services. Because we like to run tests during development, these services are mocked during unit testing.

All tests are using Mocha. Browser tests are run with Karma.

To run units:

npm test

To run integration tests:

npm run test:integration

Integration tests require a .env file in the root of your project with the following fields:

BROWSERSTACK_USERNAME=
BROWSERSTACK_ACCESS_KEY=
TEST_APIKEY=
TEST_CLOUD_APIKEY=
TEST_INTELLIGENT_APIKEY=
TEST_SECURE_APIKEY=
TEST_SIGNATURE=
TEST_POLICY=
TEST_FILELINK=
TEST_SECURE_FILELINK=

You will need to acquire this data from a Filestack developer if you plan on running the integration suite.

Contributing

We follow the conventional commits specification to ensure consistent commit messages and changelog formatting.

Changelog

2.1.0 (2019-05-06)

Features

• config: Update version of picker (#226) (11be0cc)

<a name="2.0.7"></a>